import React, { Component } from 'react'
import './login.css'
import GoBack from '../../components/GoBack/GoBack'
import img from '../../assets/img/log.png'
import { connect } from 'react-redux'
import {getuser,actions} from '../../store/modules/login'
import {bindActionCreators} from 'redux'

class Login extends Component {
  toregister() {
    this.props.history.push('/register')
  }
  
  render() {
    let {user,history, login:{changeuser,reqlogin}} =this.props
    // console.log(user);
    return (
      <>
        <div className="login">
          <div className="login-top">
            <GoBack></GoBack>
            <span>登录</span>
          </div>
          <div className="content">
            <img src={img} alt="" />
            <div>
              <input type="text" placeholder='手机号' value={user.phone} onChange={(e)=>changeuser('phone',e.target.value)}/>
            </div>
            <div>
              <input type="text" placeholder='密   码' value={user.password} onChange={(e)=>changeuser('password',e.target.value)}/>
            </div>
            <button onClick={()=>reqlogin(history)}>登录</button>
            <button onClick={() => this.toregister()}>注册</button>
          </div>
        </div>
      </>
    )
  }
}
let mapStateToProps=state=>({
  user:getuser(state)
})
let mapDispatchToProps=dispatch=>({
  login:bindActionCreators(actions,dispatch)
})
export default connect(mapStateToProps,mapDispatchToProps)(Login)
